<template>
	<view class="bg-gray">
		<u-navbar
		backIconColor='#333333'
		titleColor='#333333'
		background='#AEEF8B00'
		titleSize='36'
		:is-back="showBack" 
		:border-bottom="false" 
		:customBack='leftClick' 
		title='购买会员'>
		</u-navbar>
		<image src="https://www.haopengsong.xyz/static/hotspring/buyvipbg.png" class="buyvipbg"></image>
		<view class="width">
			<vip></vip>
			<view class="bg-white commonbg">
				<view class="lists">
					<scroll-view class="list" scroll-x="true" 
						@scroll="scroll" 
						scroll-left="120"
					>
						<view class="listitem" v-for="item in 10" :key='item'>
							<view class="share">{{item}}</view>
							<view class="font13">年卡会员</view>
							<view class="price bold">￥45</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="linebox">
				<view class="bg-white commonbg">
					<view class="font15 flex-row-start bold">
						<view class="line"></view>
						权益说明
					</view>
					<view class="color6 fontbottom">
会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明会员权益说明
					</view>
				</view>
			</view>
		</view>
		<bottomsubmit title='确认支付'></bottomsubmit>
	</view>
</template>

<script>
	import bottomsubmit from "@/components/huashuiwan/bottomsubmit.vue"; //导航栏模块
	import vip from "@/components/huashuiwan/vip.vue"; //导航栏模块
	export default {
		data() {
			return {
				showBack:true
				
			};
		},
		components:{
			bottomsubmit,
			vip
		},
		methods:{
			leftClick(){
				// 返回上一页
				uni.navigateBack({
				    delta: 1 // 默认值是1，表示返回的页面层数
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.buyvipbg{
		width: 100%;
		height: 130px;
		position: absolute;
		left: 0;
		top: 0;
	}
	.line{
		background-color: #D6A551;
	}
	.lists{
		position: relative;
		z-index: 5;
	}
	.list{
		.price{
			font-size: 18px;
			color: #D6A551;
			margin-top: 5px;
		}
		width: 100%;
		white-space: nowrap;
		margin: 15px auto;
		.listitem{
			width: 94px;
			padding: 30px 0;
			background-color: #F9F9F9;
			display: inline-block;
			border-radius: 12px;
			text-align: center;
			color: #2F3556;
			margin-right: 12px;
			position: relative;
			.share{
				width: 24px;
				height: 16px;
				border-radius: 12px  0  8px  0px;
				background-color: #D6A551;
				position: absolute;
				line-height: 16px;
				text-align: center;
				color: #fff;
				font-size: 12px;
				right: 0;
				display: none;
				bottom: 0;
			}
		}
		.listitem:nth-child(1){
			background-color: #FCF4E8;
			border:1px solid #E9CD97;
			.share{
				display: block;
			}
		}
	}
</style>